<!--
 * @Author: early-autumn
 * @Date: 2020-05-09 16:24:32
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-06 15:43:17
 -->
<template>
  <div v-loading="loading" class="treatment-record-pane">
    <el-form inline>
      <el-form-item label="预约状态">
        <el-select
          v-model="queryParams.appointmentStatus"
          placeholder="请选择"
          @change="handleReset"
        >
          <el-option
            v-for="item in appointmentStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-timeline v-if="total > 0">
      <el-timeline-item
        v-for="treatment in treatmentList"
        :key="treatment.id"
        placement="top"
        type="primary"
        :timestamp="`${treatment.createBy} 预约时间 ${treatment.startReservationTime}`"
      >
        <el-card class="card__container" shadow="hover">
          <header slot="header" class="card__header">
            <div class="card__header-content">
              <span class="card__header-content-label">
                {{ treatment.clinicName }}
              </span>
              <el-tag class="card__header-content-tag" size="mini">
                {{ appointmentStatusEnum[treatment.appointmentStatus] }}
              </el-tag>
            </div>
            <div>
              <el-button
                v-if="treatment.appointmentStatus < 3 && market"
                type="text"
                class="card__header-button"
                @click="delAppointment(treatment.id)"
                >取消</el-button
              >
              <!--              <el-button type="text" class="card__header-button">-->
              <!--                日志-->
              <!--              </el-button>-->
            </div>
          </header>
          <ul class="card__content-list">
            <li class="card__content-item">
              <span class="card__content-item-label">姓名：</span>
              <span>{{ treatment.clinicPersonName }}</span>
            </li>
            <li class="card__content-item">
              <span class="card__content-item-label">医生：</span>
              <span>{{ treatment.doctorName }}</span>
            </li>
            <li class="card__content-item">
              <span class="card__content-item-label">TC：</span>
              <span>{{ treatment.tcName }}</span>
            </li>
            <li class="card__content-item">
              <span class="card__content-item-label">项目：</span>
              <span>{{ treatment.reservationProject }}</span>
            </li>
            <li class="card__content-item">
              <span class="card__content-item-label">备注：</span>
              <span> {{ treatment.remarks }} </span>
            </li>
          </ul>
          <p class="card__footer">
            {{ treatment.createBy }} 创建于 {{ treatment.createTime }}
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <empty v-else></empty>
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListAppointmentAsync"
    ></pagination> -->
  </div>
</template>

<script>
import { listAppointment, updateAppointment } from '@/api/services/appointment'
import { delay } from '@/utils/utils'
import { appointmentStatusOptions } from '@/utils/options'
import { appointmentStatusEnum } from '@/utils/enums'

import Empty from '@/components/yiya/Empty'

const QUERY_PARAMS = {
  pageNum: 1,
  pageSize: 100000,
  orderByColumn: 'startReservationTime',
  isAsc: 'desc',
  appointmentStatus: '',
}

export default {
  name: 'TreatmentRecordPane',
  components: {
    Empty,
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
    market: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {},
      treatmentList: [],
    }
  },
  computed: {
    appointmentStatusOptions() {
      return [{ label: '全部', value: '' }, ...appointmentStatusOptions]
    },
    appointmentStatusEnum() {
      return appointmentStatusEnum
    },
  },
  mounted() {
    setTimeout(() => {
      this.queryParams = { ...QUERY_PARAMS, clinicPersonId: this.patient.id }
      this.getListAppointment()
    }, 300)
  },
  methods: {
    async getListAppointment() {
      try {
        const { rows, total } = await listAppointment(this.queryParams)
        this.treatmentList = rows
        this.total = total
      } finally {
        this.loading = false
      }
    },
    async getListAppointmentAsync() {
      try {
        this.loading = true
        this.treatmentList = []
        await delay(500)
        const { rows, total } = await listAppointment(this.queryParams)
        this.treatmentList = rows
        this.total = total
      } finally {
        this.loading = false
      }
    },
    handleReset() {
      this.queryParams.pageNum = 1
      this.getListAppointmentAsync()
    },
    /**
     * 取消预约
     */
    async delAppointment(id) {
      await this.$confirm('取消预约, 是否继续?', '提示', { type: 'warning' })
      await updateAppointment({
        id,
        appointmentStatus: 8,
      })
      const { rows } = await listAppointment(this.queryParams)
      this.treatmentList = rows
      this.msgSuccess('取消成功')
      this.$emit('update')
    },
  },
}
</script>

<style lang="scss" scoped>
.treatment-record-pane {
  width: 100%;
  min-height: 700px;
}

.card__container {
  width: 500px;
  position: relative;

  .card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card__header-content {
      display: flex;
      align-items: center;

      .card__header-content-label {
        margin: 0;
      }

      .card__header-content-tag {
        margin-left: 10px;
      }
    }

    .card__header-button {
      padding: 0;
    }
  }

  .card__content-list {
    padding-left: 0;

    .card__content-item {
      margin-bottom: 5px;
      padding-left: 0;
      display: flex;

      .card__content-item-label {
        min-width: 60px;
        display: inline-block;
      }
    }
  }

  .card__footer {
    margin: 20px 0 0 0;
  }
}
</style>
